<template>
  <div class="oneswpbox">
    <el-tabs :tab-position="'top'">
      <el-tab-pane v-for="(dt,index) in lists" :key="index">
        <template #label>
          <div class="tqlist">
            <div class="time">{{ dataToHHmm(dt.fxTime) }}</div>
            <div class="main">
              <p class="title">{{ dt.text }}</p>
              <div class="fx">
                <i :class="`qi-${dt.icon}`" />
              </div>
              <p>{{ dt.temp }}° C</p>
              <p>{{ dt.humidity }}%</p>
              <!-- <p>{{ dt.windDir }}{{ dt.windScale }}级</p> -->
              <p class="fl-box">
                <img style="height:18px;" src="@/assets/weather/fl.png">
                <el-icon color="#666" :size="14"><arrow-left /></el-icon>
                {{ dt.windScale }}级</p>
            </div>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import { getHourWeather } from '@/api/plant'
import { useFramStore } from '@/pinia/modules/farm'
import { dataToHHmm } from '@/utils/format'

const framStore = useFramStore()
const lists = ref('')
let swiperObj = ''

onMounted(() => {
  get_hour_weather()
})
watch(() => framStore.weacherFarmItem, (n, o) => {
  if (swiperObj) {
    swiperObj.slideTo(0)// 切换到第一个slide，
  }
  get_hour_weather()
})
const get_hour_weather = async() => {
  const res = await getHourWeather('h24', `${framStore.weacherFarmItem.locationLongitude},${framStore.weacherFarmItem.locationLatitude}`)
  lists.value = res.hourly // convertToTwoDimensionalArray(res.hourly, 8)
}
const convertToTwoDimensionalArray = (arr, size) => {
  const result = []
  for (let i = 0; i < arr.length; i += size) {
    result.push(arr.slice(i, i + size))
  }
  return result
}
const onSwiper = (swiper) => {
  swiperObj = swiper
}
const onSlideChange = () => {
  console.log('slide change')
}
</script>
<style lang="scss">
    .oneswpbox{
        box-sizing: border-box;
        overflow: hidden;
        width: 100%;
        background-color: #fff;
        padding:20px 10px;
        .el-tabs__item{
          height:auto;
          padding: 0;
        }
        .el-tabs__nav-wrap{
          padding:0 40px;
        }
        .el-tabs__nav-next, .el-tabs__nav-prev{
          top: 50%;
          margin-top: -22px;
          font-size: 18px;
          background: #F3F3F3;
          width: 30px;
          text-align: center;
          line-height: 60px;
        }
        .el-tabs__active-bar,
        .el-tabs__nav-wrap::after{
          display: none;
        }
        .is-active{
          .tqlist{
            background: #F0FBF7;
            box-shadow: 0px 15px 18px 0px rgba(0,0,0,0.04);
            border: 1px solid rgba(4,174,112,0.21);
          }
        }
        .tqlist{
            box-sizing: border-box;
            width: 110px;
            padding: 6px 10px;
            background: #F7F7F7;
            margin-right:10px;
            border:1px solid #eee;
            color:#666;
                .main{
                    text-align: center;
                    .fx{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding:10px 0;
                        i{
                            line-height: normal;
                            font-size: 26px;
                        }
                    }
                    .title{
                        font-size: 16px;
                        font-weight:600;
                        color:#333;
                    }
                    .fl-box{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
                .time{
                    text-align: center;
                    color:#666;
                    font-size: 14px;
                }

        }
        .swiper-button-prev:after,.swiper-button-next:after{
            font-size: 20px;
            color: #333;
        }
    }
</style>
